<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:p="http://primefaces.prime.com.tr/ui" 
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="/Facelets/Templates/template.xhtml">  

    <ui:define name="content"> 

        <script type="text/javascript">  
            
        function handleLoginRequest(xhr, status, args) {  
         if(args.validationFailed) {  
             jQuery('#dialog').parent().effect("shake", { times:2 }, 100);  
         } else {  
             dlgCadastro.hide();  
         }  
                }
        

         function start() {
                cont=0;
                this.progressInterval = setInterval(function(){
                        pbClient.setValue(pbClient.getValue() + 5);
                        if(pbClient.getValue()==100){
                            dlgCadastro.hide();
                            dlgMensagem.show();
                            cancel();
                        }
                }, 100);
                
                
                
        }

                
        function cancel() {
                clearInterval(this.progressInterval);
                pbClient.setValue(0);
        }


        
        </script> 


        <div class="ui-widget" style="padding-left: 10px; padding-top: 5px; padding-bottom: 14px;">
            <a href="#{request.contextPath}/index.faces" style="color: black;">Home</a> > Cadastro de Cópias de Segurança
        </div>

        <p:fieldset legend="Copias de Segurança">
            <h:form id="formTool">
                <p:panel>
                    <p:commandButton title="Criar Nova Cópia de Segurança"
                                     value="Criar Nova" image="ui-icon ui-icon-document"
                                     oncomplete="dlgCadastro.show()" update="formCadastro"/>
                </p:panel>
            </h:form>

            <h:form id="formTabela">

                <p:panel>
                    <p:dataTable id="List" rows="10" paginator="true" 
                                 paginatorPosition="top"
                                 var="backup" value="#{BackupBean.backs}">
                        
                        <f:facet name="header">Copias de Segurança</f:facet>

                        <p:column headerText="Data" style="width:10%">
                            <h:outputText value="#{backup.data}"/>
                        </p:column>

                        <p:column headerText="Hora" style="width:20%">
                            <h:outputText value="#{backup.hora}"/>
                        </p:column>

                        <p:column headerText="Observação" style="width:15%">
                            <h:outputText value="#{backup.observacao}" />
                        </p:column>

                        <p:column headerText="Restaurar" style="width:10%">
                            <p:commandButton update="formTabela"
                                             
                                             image="ui-icon-trash">
                            </p:commandButton>
                        </p:column>

                        <f:facet name="footer">  
            			Copias no total.  
                        </f:facet>
                    </p:dataTable>
                </p:panel>

            </h:form>

            <h:form>
                <p:confirmDialog message="Deseja realmente excluir este Usuário?"
                                 showEffect="slide" hideEffect="explode" appendToBody="true"
                                 header="Confirmação" severity="alert" modal="true"
                                 widgetVar="confirmation">

                    <p:commandButton value="Sim" update="formTabela"
                                     oncomplete="confirmation.hide()"
                                     />
                    <p:commandButton value="Não" onclick="confirmation.hide()"
                                     type="button" />
                </p:confirmDialog>
            </h:form>
        </p:fieldset>

        <p:dialog id = "dialog" widgetVar="dlgCadastro" resizable="false" modal="true" appendToBody="true" closeOnEscape="true"
                  position="center" width="400" onShow="start()">

            <h:form id="formCadastro">
                <p:growl id="msgs"/>
                <p:fieldset legend="Progresso">




                    <h:panelGrid columns="1" cellpadding="5">
                        <p:progressBar widgetVar="pbClient" style="width:300px" oncomplete="mensagem.rendered()"/>
                    
                    </h:panelGrid>
                    <h:outputText id="mensagem" value="aaaaaaa" rendered="false" />



                    <h:panelGrid columns="2" cellpadding="5">
                        <p:commandButton id="btCancelar" value="Cancelar" image = "ui-icon-save"
                                         update="formTabela msgs"  onclick="dlgCadastro.hide();cancel();"/>
                    </h:panelGrid>
                </p:fieldset>
            </h:form>
        </p:dialog>

        <p:dialog id = "dialog2" widgetVar="dlgMensagem" resizable="false" modal="true" appendToBody="true" closeOnEscape="true"
                  position="center" width="400">

            <h:form id="formMensagemConclusao">
                <p:fieldset legend="Concluído">
                    <h:panelGrid columns="1" cellpadding="5">
                        <h:outputText value="Sua operação de Cópia de Segurança foi realizada com sucesso!"/>
                    </h:panelGrid>
                    <h:panelGrid columns="2" cellpadding="5">
                        <p:commandButton id="btFechar" value="Fechar" image = "ui-icon-save"
                                         update="formTabela msgs"  onclick="dlgMensagem.hide()"/>
                    </h:panelGrid>
                </p:fieldset>
            </h:form>
        </p:dialog>

        

    </ui:define> 
</ui:composition>